import React from './react';//核心库
import ReactDOM from './react-dom';//DOM渲染库
/** 
 * ref reference 引用
 * ref允许我们访问DOM节点或者在React中创建的组件实例
 * ref 字符串 组件this.refs = {key:value} key是字符串 a b 值就是这个虚拟DOM在浏览器中的真实DOM
 *     函数  ref是一个函数 
 *     对象   主流是第三种
 * 
 * 
*/
class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.a = React.createRef();      //{current:null} hooks useRef
    this.b = React.createRef();      //{current:null}
    this.result = React.createRef(); //{current:null}
  }
  handleAdd = (event) => {
    let a = this.a.current.value;
    let b = this.b.current.value;
    this.result.current.value = parseFloat(a) + parseFloat(b);
  }
  render() {
    return (
      <div>
        <input ref={this.a} />+<input ref={this.b} /><button onClick={this.handleAdd}>=</button><input ref={this.result} />
      </div>
    )
  }
}
ReactDOM.render(<Calculator />, document.getElementById('root'));
/*
绑定事件的时候 虚拟DOM JSX绑定和原生DOM不一样
1. 属性名 JSX onClick 原生DOM onclick
2. 值  JSX 函数的指针 函数变量名 原生DOM 字符串
*/